.center_margin {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
body {
  margin: 0;
  padding: 0;
  background-color: #d1d8e0;
}
.switch_on {
  background-color: #20bf6b !important;
  filter: drop-shadow(1px -1px 2px #59627599) !important;
  transition: all 300ms linear;
}
.switch {
  width: 100px;
  height: 40px;
  background-color: #d1d8e0;
  border: 2px solid #fff;
  border-radius: 100px;
  box-shadow: inset 0 0 5px #59627599;
  cursor: pointer;
  transition: all 300ms linear;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  filter: drop-shadow(-1px 1px 2px #59627599);
}
.switch .knob_on {
  transform: translateX(150%) rotate(360deg) !important;
  border: 1px solid #fff !important;
  background-color: #a55eea !important;
  transition: transform 300ms linear;
}
.switch .knob {
  width: 40px;
  height: 40px;
  border: 1px solid #808e9b99;
  border-radius: 50%;
  box-sizing: border-box;
  background-color: #fff;
  position: relative;
  transform: rotate(180deg);
  transition: transform 300ms linear;
}
.switch .knob img {
  width: 90%;
  height: 90%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
